<template>
<div class="container">
    <div class="header">
        <img src="http://city-card.oss-cn-hangzhou.aliyuncs.com/big-screen/WechatIMG129.png" class="img-responsive"/>
    </div>
    <Row :gutter="16" class="sub-menu" >
        <Col span="6">
            <div class="item">
                <div class="btn shaodw" @click="menuAction(1)">入境人员数据库</div>
                <div class="group">
                    <div class="gitem full">
                        <div class="total">{{getwlryCountObj.zs}}</div>
<!--                        <div class="total">13841</div>-->
                        <div class="desc">入境人员总数</div>
                    </div>
                </div>
                <div class="group">
                    <!--<div class="gitem">-->
                        <!--<div class="total">{{getwlryCountObj.mjsl}}</div>-->
                        <!--<div class="desc">密接人员总数</div>-->
                    <!--</div>-->
                    <div class="gitem">
                        <div class="total">{{getwlryCountObj.zgj}}</div>
<!--                        <div class="total">12634</div>-->
                        <div class="desc">中国籍人员总数</div>
                    </div>
                    <div class="gitem">
                        <div class="total">{{getwlryCountObj.qtgj}}</div>
<!--                        <div class="total">1207</div>-->
                        <div class="desc">外国籍人员总数</div>
                    </div>
                </div>
                <div class="source">数据来源: 沈阳市公安局</div>
            </div>
        </Col>
        <Col span="6">
            <div class="item">
                <div class="btn shaodw" @click="menuAction(2)">隔离人员数据库</div>
                <div class="group">
                    <div class="gitem full">
                        <div class="total">{{getglryCountObj.zscount}}</div>
                        <div class="desc">隔离人员总数</div>
                    </div>
                </div>
                <div class="group">
                    <div class="gitem">
                        <div class="total">{{getglryCountObj.isolate_num}}</div>
                        <div class="desc">正在隔离人员总数</div>
                    </div>
                    <div class="gitem">
                        <div class="total">{{getglryCountObj.release_num}}</div>
                        <div class="desc">解除隔离人员总数</div>
                    </div>
                </div>
                <div class="source">数据来源: 沈阳市公安局</div>
            </div>
        </Col>
        <Col span="6">
            <div class="item">
                <div class="btn shaodw" @click="menuAction(9)">北京分流人员数据库</div>
                <div class="group">
                    <div class="gitem full">
                        <div class="total">{{getglRYSSXCountObj.bjDevideNum}}</div>
                        <div class="desc">北京分流航班人数</div>
                    </div>
                </div>
                <div class="group">
                    <div class="gitem">
                        <div class="total">{{getglRYSSXCountObj.isolateModeNum}}</div>
                        <div class="desc">集中隔离人数</div>
                    </div>
                    <div class="gitem">
                        <div class="total">{{getglRYSSXCountObj.leaveNum}}</div>
                        <div class="desc">转运人数</div>
                    </div>
                </div>
                <div class="source">数据来源: 沈阳市卫健委</div>
            </div>
        </Col>
        <Col span="6">
            <div class="item">
                <div class="btn shaodw" @click="menuAction(4)">密接人员数据库</div>
                <div class="group">
                    <div class="gitem full">
                        <div class="total">{{getContacCountObj.zs}}</div>
                        <div class="desc">密接人员总数</div>
                    </div>
                </div>
                <div class="group">
                    <div class="gitem">
                        <div class="total">{{getContacCountObj.zs - getContacCountObj.jcgc}}</div>
                        <div class="desc">正在观察密接人员总数</div>
                    </div>
                    <div class="gitem">
                        <div class="total">{{getContacCountObj.jcgc}}</div>
                        <div class="desc">解除观察密接人员总数</div>
                    </div>
                </div>
                <div class="source">数据来源: 沈阳市卫健委</div>
            </div>
        </Col>
    </Row>
    <Row :gutter="16" class="sub-menu">
        <Col span="6">
            <div class="item">
                <div class="btn shaodw" @click="menuAction(5)">确诊和无症状人员数据库</div>
                <div class="group">
                    <div class="gitem full">
                        <div class="total">{{getAsymptomaticCountObj.qz + getAsymptomaticCountObj.wzz}}</div>
                        <div class="desc">确诊人员总数</div>
                    </div>
                </div>
                <div class="group">
                    <div class="gitem">
                        <div class="total">{{getAsymptomaticCountObj.qz}}</div>
                        <div class="desc">确诊病例</div>
                    </div>
                    <div class="gitem">
                        <div class="total">{{getAsymptomaticCountObj.wzz}}</div>
                        <div class="desc">无症状感染者</div>
                    </div>
                </div>
                <div class="source">数据来源: 沈阳市卫健委</div>
            </div>
        </Col>
        <Col span="6">
            <div class="item">
                <div class="btn shaodw" @click="menuAction(6)">隔离宾馆数据库</div>
                <div class="group">
                    <div class="gitem full">
                        <div class="total">{{getglbgCountObj.fjslcount}}</div>
                        <div class="desc">房间总数</div>
                    </div>
                </div>
                <div class="group">
                    <div class="gitem">
                        <div class="total">{{getglbgCountObj.kyfjcount}}</div>
                        <div class="desc">可接纳房间数</div>
                    </div>
                    <div class="gitem">
                        <div class="total">{{getglbgCountObj.syfjcount}}</div>
                        <div class="desc">使用房间数</div>
                    </div>
                </div>
                <div class="source">数据来源: 沈阳市文旅局</div>
            </div>
        </Col>
        <Col span="6">
            <div class="item">
                <div class="btn shaodw" @click="menuAction(7)">核酸检测数据库</div>
                <div class="group">
                    <div class="gitem full">
                        <div class="total">{{getSamplingCountObj.nucleic_num+getSamplingCountObj.serum_num}}</div>
                        <div class="desc">检测人次</div>
                    </div>
                </div>
                <div class="group">
                    <div class="gitem">
                        <div class="total">{{getSamplingCountObj.nucleic_num}}</div>
                        <div class="desc">核酸检测人次</div>
                    </div>
                    <div class="gitem">
                        <div class="total">{{getSamplingCountObj.serum_num}}</div>
                        <div class="desc">血清检测人次</div>
                    </div>
                </div>
                <div class="source">数据来源: 沈阳市疾控中心</div>
            </div>
        </Col>
        <Col span="6">
            <div class="item">
                <div class="btn shaodw" @click="menuAction(3)">转运人员数据库</div>
                <div class="group">
                    <div class="gitem full">
                        <div class="total">{{getzsryCountObj.zscount}}</div>
                        <div class="desc">转运人员总数</div>
                    </div>
                </div>
                <div class="group">
                    <div class="gitem">
                        <div class="total">{{getzsryCountObj.snzy}}</div>
                        <div class="desc">省内转运人员数量</div>
                    </div>
                    <div class="gitem">
                        <div class="total">{{getzsryCountObj.swzy}}</div>
                        <div class="desc">省外转运人员数量</div>
                    </div>
                </div>
                <div class="source">数据来源: 沈阳市交通局</div>
            </div>
        </Col>
<!--        <Col span="6">-->
<!--            <div class="item">-->
<!--                <div class="btn shaodw" @click="menuAction(8)">预警提示数据库</div>-->
<!--                <div class="group">-->
<!--                    <div class="gitem full">-->
<!--                        <div class="total">0</div>-->
<!--                        <div class="desc">同行密接(接触)报警</div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="group">-->
<!--                    <div class="gitem">-->
<!--                        <div class="total">0</div>-->
<!--                        <div class="desc">提前解除隔离报警</div>-->
<!--                    </div>-->
<!--                    <div class="gitem">-->
<!--                        <div class="total">0</div>-->
<!--                        <div class="desc">延迟提报数据预警</div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="source">数据来源: 系统运行筛查</div>-->
<!--            </div>-->
<!--        </Col>-->
    </Row>
    <div class="footer">

    </div>

    <Modal footer-hide title="预警提示"
        v-model="modal1">
        <dlq-warning></dlq-warning>

    </Modal>

</div>
</template>
<script>
import {
  getwlryCount, // 外来入沈人员统计     gh
  getzsryCount, // 转送人员统计        gh
  getContacCount, // 密接人员统计        ym
  getAsymptomaticCount, // 确诊人员统计    ym
  getglryCount, // 隔离人员统计        gh      隔离比例
  getSamplingCount, // 核酸检测统计        ym      核酸检测比例
  getglbgCount, // 宾馆数量统计        gh     定点宾馆,非定点宾馆,床位总数
  findtypeList, // 红码                gh
  getglRYSSXCount
} from '@/api/statistics-data-list'
// import areaJSON from '@/libs/area'
import DlqWarning from '@/components/warning'
export default {
  components: { DlqWarning },
  data () {
    return {
      getglRYSSXCountObj: {},
      // 外来入沈人员统计
      getwlryCountObj: {
        zs: '0',
        qtgj: '0',
        zgj: '0'
      },
      // 隔离人员统计
      getglryCountObj: {},
      // 转送人员统计
      getzsryCountObj: {},
      // 密接人员统计
      getContacCountObj: {},
      // 确诊人员统计
      getAsymptomaticCountObj: {},
      // 宾馆数量统计
      getglbgCountObj: {},
      // 核酸检测统计
      getSamplingCountObj: {},
      // 红码
      findtypeListObj: {},

      modal1: false
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    // 入沈人员 | 隔离人员 | 转运人员 | 密接人员 | 确诊和无症状 | 宾馆总数 | 核酸检测 | 预警提示
    menuAction (val) {
      if (val === '8') {
        this.modal1 = true
        return
      }

      let name = ''
      switch (val) {
        case 0:
          name = 'login-v2'
          break
        case 1:
          name = 'statImmigrationChart'
          break
        case 2:
          name = 'statIsolationChart'
          break
        case 3:
          name = 'statTransportChart'
          break
        case 4:
          name = 'statCloseContactChart'
          break
        case 5:
          name = 'statConfirmedAsymptomaticChart'
          break
        case 6:
          name = 'statIsolationHotelChart'
          break
        case 7:
          name = 'statNucleicAcidDetectionChart'
          break
        case 9:
          name = 'statBjShuntChart'
          break
      }
      this.$router.push({ name: name })
    },

    init () {
      console.log('1111')
      getglRYSSXCount({}).then(res => {
        this.getglRYSSXCountObj = res.data.data
        this.$forceUpdate()
      })

      getwlryCount({}).then(res => {
        this.getwlryCountObj = res.data.data
        this.$forceUpdate()
        // console.log(res.data.data);
      })

      getglryCount({}).then(res => {
        this.getglryCountObj = res.data.data
        this.$forceUpdate()
        // console.log(res.data.data);
      })

      getzsryCount({}).then(res => {
        this.getzsryCountObj = res.data.data
        this.$forceUpdate()
        // console.log(res.data.data);
      })

      getContacCount({}).then(res => {
        this.getContacCountObj = res.data.data
        this.$forceUpdate()
        // console.log(res.data.data);
      })

      getAsymptomaticCount({}).then(res => {
        this.getAsymptomaticCountObj = res.data.data
        this.$forceUpdate()
        // console.log(res.data.data);
      })

      getglbgCount({}).then(res => {
        this.getglbgCountObj = res.data.data
        this.$forceUpdate()
        // console.log(res.data.data);
      })
      getSamplingCount({}).then(res => {
        this.getSamplingCountObj = res.data.data
        this.$forceUpdate()
        // console.log(res.data.data)
      })

      findtypeList({}).then(res => {
        this.findtypeListObj = res.data.data
        this.$forceUpdate()
        // console.log(res.data.data);
      })
      // this.$forceUpdate()
    }
  }
}
</script>

<style scoped>
    .container {
        padding: 20px 40px 100px 40px;
        background-color: #053167;

    }
    .img-responsive {
        display: inline-block;
        height: auto;
        width: 100%;
    }
    .item {
        background: rgba(255,255,255,0.2);
        padding: 20px;
        width: 100%;
   }
   .btn {
       background: rgba(255,255,255,0.2);
       width: 96%;
       margin: 0 2%;
       text-align: center;
       padding: 20px;
       border-radius: 20px;
       font-size: 24px;
       font-weight: 700;
       color: white;
       cursor: pointer;
   }
    .group {
        display: flex;
        justify-content: space-around;
        margin-top: 20px;
    }
    .group .gitem.full {
        width: 96%;
    }
    .group .gitem {
        width: 46%;
        color: white;
        padding: 30px 0;
        border-radius: 5px;
        border: 1px solid white;
    }
    .group .gitem>.total {
        font-size: 36px;
        width: 100%;
        font-weight: bold;
        text-align: center;
        margin-bottom: 8px;
    }
    .group .gitem>.desc {
        font-size: 16px;
        width: 100%;
        text-align: center;
    }
    .sub-menu {
        margin-top: 20px;
    }
    .source {
        width: 100%;
        text-align: center;
        color: white;
        font-size: 18px;
        padding-top: 20px;
    }
    .shaodw {
        -moz-box-shadow:2px 2px 5px #333333;
        -webkit-box-shadow:2px 2px 5px #333333;
        box-shadow:2px 2px 5px #333333;
    }

</style>
